<!DOCTYPE html>
<html lang="">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <title>自动建模系统</title>
    <style type="text/css">
      .index-loader{
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        position: absolute;top: 50%;left: 50%;
        transform: translate(-50%,-50%);
      }
      .index-loader .index-box{
        width: 200px;
        height: 100px;
        animation: rotateBox 2.5s linear infinite;
      }
      .index-loader .index-box .index-circle{
        position: absolute;
        top: 0;
        width: 100px;
        height: 100px;
        background-color: #f5e866;
        border-radius: 50%;
        animation: animate 2.5s linear infinite;
      }
      .index-loader .index-box .index-circle:nth-child(1){
        left: 0;
        transform-origin: right;
      }
      .index-loader .index-box .index-circle:nth-child(2){
        right: 0;
        transform-origin: left;
        background-color: #a08fd5;
        /* 设置第二个圆的动画延迟时间 */
        animation-delay: -1.25s;
      }
      .index-loader span{
        font-size: 20px;
        font-weight: 500;
        margin-top: 30px;
        letter-spacing: 4px;
      }
      
      @keyframes animate {
        0%{transform: scale(1);}
        50%{transform: scale(0.2);}
        100%{transform: scale(1);}
      }
      @keyframes rotateBox {
        to{transform: rotate(360deg);}
      }
    </style>
  </head>
  <body>
    <noscript>
      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app">
      <div class="index-loader">
        <div class="index-box">
            <div class="index-circle"></div>
            <div class="index-circle"></div>
        </div>
        <span>Loading...</span>
      </div>
    </div>
  </body>
</html>
